<template>
    <div class="app">
        <merchantHeader/>
        <div class="back">
            <div class="con">
              <div class="pxes"></div>
              <div class="listneo">
                <businessL/>
                <div class="conres">
                  <div class="ra"><h3>交易数据</h3> </div>
                  <div class="yuansdj">

                    <div class="jaoyishuj errror">
                      <div class="top_o2">实时交易数据 <p>（统计时间：2019-11-29 15:41:19）</p></div>
                      <div class="ower_to">
                        <div class="hekome1">
                          <h4>支付金额（元） </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome1">
                          <h4> 支付买家数 </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome1">
                          <h4>支付订单数  </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome1">
                          <h4>订单金额  </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome1">
                          <h4>订单件数 </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome2">
                          <h4>即将失效订单金额</h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                      </div>
                    </div>
                    <div class="jaoyishuj errror">
                      <div class="top_o2">商品数据 <p>（统计时间：2019-11-29 ）</p></div>
                      <div class="ower_to">
                        <div class="hekome1">
                          <h4>商品访客数 </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome1">
                          <h4> 商品浏览量 </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome1">
                          <h4>  商品预定数量  </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome1">
                          <h4> 被访问商品数  </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome1">
                          <h4>  服务数据  </h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                        <div class="hekome2">
                          <h4> 成功退款金额（元）</h4>
                          <h4>00</h4>
                          <p>较前一天：0.00</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="myChart" style="width:700px;height:500px;margin:0 auto"></div>
                  <businessF/>
                </div>
              </div>
              
            </div>
        </div>
        <Footer/>
    </div>
</template>
<script>
import merchantHeader from '@/components/merchantHeader'
import Footer from '@/components/Footer'
import businessL from '@/components/businessL'
import businessF from '@/components/businessF'
export default {
    components: { 
    merchantHeader,
    Footer,
    businessL,
    businessF
    },
    data() {
      return {
        colors:'#f56c6c',
        data:'88'
      }
      
    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        let option = {
          xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
          }]
        };
        myChart.setOption(option)
      }
    },
}
</script>
<style scoped>
.app  /deep/  .ist_l .ist_c li:nth-child(1) {
    background-color: #ff9381;
    width: 126px;
    height: 50px;
    display: block;
}


.back {
    background-color: #f06048
}  
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee
} 
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff
}
.conres .ra h3{
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  margin-top: 15px;
  padding-bottom: 10px;
}

.shejh {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
  line-height: 20px;
}
.shejh div:nth-child(1) {
  font-size: 20px;

}
.shejh div:nth-child(2) {
  font-size: 14px;
  margin-left: 40px;
}
.wdmewdefme {
  display: flex
}
.mubiao {
  display: flex;
  margin-left: 20px;
  margin-top: 40px;
}
.toefmn_wk {
  margin-right: 12px;
}
.toefmn_wk span{
  display: block;
}
.toefmn_wk .ene {
  color: #f06048
}
.one_mw {
  display: flex;
}
.wnwe_wdnn .ee_q {
  margin-top: 20px;
}
.wnwe_wdnn .ee_q h5 {
  font-size: 18px
}
.wnwe_wdnn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  width: 300px;
}
.top_o2 {
  font-size: 18px;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 25px;
  display: flex;
}
.ower_to {
  width: 873px;
	height: 141px;
	border: solid 1px #a0a0a0;
  margin: 10px auto;
  display: flex;
  text-align: center;
  line-height: 45px;
}
.ower_to h4 {
  font-size: 18px
}
.jaoyishuj {
  margin-bottom: 35px;
}
.errror .hekome1 {
  width: 16%;
  border-right: 1px solid #a0a0a0;
}
.hekome2 {
  text-align: center;
  margin-left: 6px;
}
</style>